<template>  
  <div style="max-width: 700px; margin: 0 auto; padding: 20px;">  
    <br />  
    <!-- 下拉框选择图表类型 -->  
    <div style="margin-bottom: 20px;">  
      <el-select  
        v-model="selectedChart"  
        @change="updateChart"  
        placeholder="选择图表类型"  
        style="width: 700px; display: block; margin: 0 auto;"  
      >  
        <el-option label="已就业人数柱状图" value="employed"></el-option>  
        <el-option label="未就业人数柱状图" value="unemployed"></el-option>  
        <el-option label="平均薪资柱状图" value="averageSalary"></el-option>  
        <el-option label="就业率柱状图" value="employmentRate"></el-option>  
      </el-select>  
    </div>  

    <div v-if="hasData" style="display: inline-block; margin-top: 30px;">  
      <h2 style="text-align: center; margin-bottom: 20px;">{{ chartTitle }}</h2>  
      <div ref="chartRef" style="width: 600px; height: 400px; margin: 0 auto;"></div>  
    </div>  

    <div v-else style="text-align: center; margin-top: 20px;">  
      <el-alert  
        title="暂无数据"  
        type="info"  
        center  
        :closable="false"  
        style="width: 600px; height: 400px; line-height: 400px; margin: 0 auto;"  
      ></el-alert>  
    </div>  
  </div>  
</template>  

<script setup lang="ts">  
import * as echarts from 'echarts';  
import { ref, onMounted, nextTick } from 'vue';  
import { cesClazzApi } from '@/api/clazz-api';  
import { ElMessage } from 'element-plus';  


// 格式化时间的方法  去掉T
const formatTime = (time: string) => {
  if (!time) return '';
  return time.replace('T', ' ');
}
// 查询条件  
const selectedChart = ref('employed');  
const hasData = ref(false);  
const chartTitle = ref('班级 - 已就业人数柱状图');  
const chartRef = ref(null);  


// 数据加载和处理逻辑  
const loadData = async () => {  
  try {  
    const response = await cesClazzApi();  
    if (response.code === 200 && response.data.length > 0) {  
      hasData.value = true;  
      renderChart(response.data);  
    } else {  
      ElMessage.error('获取班级就业数据失败或暂无数据');  
      hasData.value = false;  
    }  
  } catch (error) {  
    console.error('数据加载失败:', error);  
    ElMessage.error('数据加载失败');  
  }  
};  

// 渲染图表  
const renderChart = (data: any[]) => {  
  if (!hasData.value) return;  

  let option = {};  
  const colors = ['#5470C6', '#91CC75', '#EE6666', '#73C0DE'];  

  // 根据所选图表类型设置不同的图表选项  
  switch (selectedChart.value) {  
    case 'employed':  
      chartTitle.value = '班级 - 已就业人数柱状图';  
      option = {  
        title: { text: chartTitle.value, left: 'center' },  
        tooltip: { trigger: 'item' },  
        xAxis: {  
          type: 'category',  
          data: data.map(item => item.clazzName),  
          name: '班级',  
          axisLabel: { interval: 0 }  
        },  
        yAxis: { type: 'value', name: '已就业人数' },  
        series: [{  
          name: '已就业人数',  
          type: 'bar',  
          data: data.map(item => item.employedStudents),  
          itemStyle: {  
            color: function(params: { dataIndex: number; }) {  
              return colors[params.dataIndex % colors.length];  
            }  
          },
          label: {
            show: true,
            position: 'top',
            formatter: function (params: { value: any; }) {
              return params.value;
            }
          }
        }]  
      };  
      break;  

    case 'unemployed':  
      chartTitle.value = '班级 - 未就业人数柱状图';  
      option = {  
        title: { text: chartTitle.value, left: 'center' },  
        tooltip: { trigger: 'item' },  
        xAxis: {  
          type: 'category',  
          data: data.map(item => item.clazzName),  
          name: '班级',  
          axisLabel: { interval: 0 }  
        },  
        yAxis: { type: 'value', name: '未就业人数' },  
        series: [{  
          name: '未就业人数',  
          type: 'bar',  
          data: data.map(item => item.unemployedStudents),  
          itemStyle: {  
            color: function(params: { dataIndex: number; }) {  
              return colors[params.dataIndex % colors.length];  
            }  
          },
          label: {
            show: true,
            position: 'top',
            formatter: function (params: { value: any; }) {
              return params.value;
            }
          }
        }]  
      };  
      break;  

    case 'averageSalary':  
      chartTitle.value = '班级 - 平均薪资柱状图';  
      option = {  
        title: { text: chartTitle.value, left: 'center' },  
        tooltip: { trigger: 'item' },  
        xAxis: {  
          type: 'category',  
          data: data.map(item => item.clazzName),  
          name: '班级',  
          axisLabel: { interval: 0 }  
        },  
        yAxis: { type: 'value', name: '平均薪资' },  
        series: [{  
          name: '平均薪资',  
          type: 'bar',  
          data: data.map(item => item.averageSalary.toFixed(0)),  
          itemStyle: {  
            color: function(params: { dataIndex: number; }) {  
              return colors[params.dataIndex % colors.length];  
            }  
          }  ,
          label: {
            show: true,
            position: 'top',
            formatter: function (params: { value: any; }) {
              return params.value;
            }
          }
        }]  
      };  
      break;  

    case 'employmentRate':  
      chartTitle.value = '班级 - 就业率柱状图';  
      option = {  
        title: { text: chartTitle.value, left: 'center' },  
        tooltip: { trigger: 'item' },  
        xAxis: {  
          type: 'category',  
          data: data.map(item => item.clazzName),  
          name: '班级',  
          axisLabel: { interval: 0 }  
        },  
        yAxis: { type: 'value', name: '就业率 (%)' },  
        series: [{  
          name: '就业率',  
          type: 'bar',  
          data: data.map(item => item.employmentRate.toFixed(0)),  
          itemStyle: {  
            color: function(params: { dataIndex: number; }) {  
              return colors[params.dataIndex % colors.length];  
            }  
          }  ,
          label: {
            show: true,
            position: 'top',
            formatter: function (params: { value: any; }) {
              return params.value;
            }
          }
        }]  
      };  
      break;  

    default:  
      return;  
  }  

  // 初始化图表并设置选项  
  nextTick(() => {  
    if (chartRef.value) {  
      const chart = echarts.init(chartRef.value);  
      chart.setOption(option);  
    }  
  });  
};  

// 更新图表显示  
const updateChart = () => {  
  loadData(); // 重新加载数据并更新图表  
};  

// 挂载时初始化图表  
onMounted(() => {  
  loadData();  
});  
</script>  

<style scoped>  
/* 可以添加自定义样式 */  
h2 {  
  color: #303133;  
  font-size: 24px;  
}  

.el-select {  
  padding: 10px;  
  margin-bottom: 20px !important;  
}  

.el-alert {  
  background-color: #f5f5f5;  
  border: 1px solid #dcdfe6;  
  color: #909399;  
}  
</style>  